<template>
    <div class="jian">

        <div class="header">
            <router-link to="shezhi">
                <van-icon name="arrow-left" class="fanhui" />
            </router-link>
            <h1>选择标签</h1>

        </div>
        <h2>兴趣爱好（最多选一项）</h2>
        <ul class="nav_nei">
            <li v-for="(item, index) in list"><span @click="bao(item, index)" :class="{ active: index == num, }">{{
                    item
            }}</span></li>

        </ul>
        <!-- </div> -->
        <span class="foot" @click="ni(b), chufa()">保存</span>
    </div>
</template>
<script>
// import duan from "@/store/index"

import { Toast } from 'vant';
export default {
    data() {
        return {
            list: ['购物', '电影', '音乐'],
            num: 0,
            b: '',
        }
    },
    created() {
        this.num = -1;
    },
    methods: {
        bao(item, index) {
            this.b = item;
            this.num = index;
        },

        ni(b) {
            if (b) {
                this.$store.commit('duan/setBiao', b);
                console.log(b);
            }
        },
        chufa() {
            if (this.b) {
                this.$router.push({ name: 'shezhi' })
            } else {
                Toast({
                    message: '最少先一项',
                    position: 'top',
                    overlay: 1,
                    duration: 300,
                })
            }

        }
    },
}
</script>
<style scoped>
.jian {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;

}

.header {
    width: 100%;
    height: 50px;
    background-color: rgba(248, 248, 248, 100);
    /* position: relative; */
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.fanhui {
    color: black;
    font-size: 23px;
    font-weight: bolder;
    left: 10px;
    top: 10px;
}

h1 {
    margin-top: 10px;
}

h2 {
    margin-top: -90%;
    margin-left: 20px;
    font-size: 25px;
}

.nav_nei {

    width: 100%;
    /* height: 20%; */
    /* background-color: aqua; */
    margin-top: -90%;
    /* text-indent: 20px; */
    font-size: 14px;
    line-height: 50px;
    color: #444;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-around
}

li {
    width: 100px;
    height: 40px;
    margin-left: 20px;
    margin-top: 10px;

}

span {
    display: block;
    border: 1px solid #999;
    width: 100px;
    height: 40px;
    text-align: center;
    line-height: 40px;
}

.foot {
    width: 80%;
    height: 10%;
    display: flex;
    margin-left: 10%;
    flex-direction: column;
    justify-content: space-around;
    background-color: #444;
    color: #fff;
    border-radius: 10px;
    margin-bottom: 30px;
}

.active {
    background-color: red;
}
</style>